<template>
  <div class="mybox">
    <div class="mybox1 myBg1">
      <!-- <img class="myimg light" :src="url+list2.userImg" alt="" /> -->
      <img class="myimg light" :src="url" alt="" @click="dialogVisible = true"/>
      <b class="fdkjas" @click="change8()">编辑资料</b>
      <el-dialog
  title="更改头像"
  :visible.sync="dialogVisible"
width="80%"
  :before-close="handleClose">
  <el-upload
      class="avatar-uploader"
      action="http://192.168.10.32/junjian/user/updateInfo"
      ref="upload"
      name="file"
      :show-file-list="false"
      :limit="1"
      :data="aaa"
       :on-change="imgSaveToUrl"
      :auto-upload="false"
    >
      <img
        v-if="imageUrl"
        :src="imageUrl"
        class="avatar"
        style="border-radius: 50%"
      />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  <span slot="footer" class="dialog-footer">
    <el-button @click="upload1">取 消</el-button>
    <el-button type="primary" @click="upload">保存</el-button>
  </span>
</el-dialog>
      <p class="myp1">
        {{ list2.nickname }}
        <i
          class="myimg1"
          :class="
            list2.userSex == '女' ? 'iconfont icon-nvsheng' : 'iconfont icon-nansheng'
          "
          alt=""
        ></i>
      </p>
      <p class="myp2">学号: {{ list2.uid }}</p>
      <section class="mys1">
        <p class="myp3">
          累计上课: <span> {{ list2.userClassHour }}</span>
        </p>
        <p class="myp4">
          剩余课时: <span> {{ list2.userClassRest }}</span>
        </p>
        <p class="myp4">
          成长值: <span> {{ list2.userGrowth }}</span>
        </p>
      </section>
    </div>
    <ul class="mybox2">
      <li class="myli1" @click="change1()">
        <i class="iconfont icon-tuipiao i1"></i><span>我的余额</span>
      </li>
      <li class="myli2" @click="change2()">
        <i class="iconfont icon-icon-test7 i2"></i><span>我的订单 </span>
      </li>
      <li class="myli3" @click="change3()">
        <i class="iconfont icon-youhuiquan i3"></i><span>优惠券</span>
      </li>
      <li class="myli4" @click="change4()">
        <i class="iconfont icon-wode i4"></i><span>在线客服</span>
      </li>
      <li class="myli5" @click="change5()">
        <i class="iconfont icon-yingpingmoban i5"></i><span>关于我们</span>
      </li>
      <li class="myli6" @click="change6()">
        <i class="iconfont icon-huiyuan i6"></i><span>学习打卡</span>
      </li>
    </ul>
    <div class="mybox3">
      <!-- 退出接口 -->
      <!-- <img class="myColor" :src="list.color" alt=""> -->
      <i class="myColor"></i>
      <!-- <b>退出账号</b> -->
      <p>你已经在微课学堂的世界呆了 {{ list2.day }} 天</p>
      <p>超棒的(○—3—)~ <span>❤</span> ~</p>
      <section class="centerlocal"></section>
      <el-button class="checkout" @click="checkout">退出登录</el-button>
    </div>
  </div>
</template>
<script>
import { userInfo, showimg } from "@/api";
export default {
  created() {
    this.aaa.user = '{uid'+':'+this.$store.state.id+'}';
    this.imageUrl = this.url + "?" + "uid=" + this.$store.state.id;
  
    // 添加了 未登录状态禁止进入我的
    if (this.$store.state.userphone === "") {
      this.$router.push("/");
    } else {
      this.id = this.$store.state.userphone;
      let userphone = this.$store.state.userphone;
      this.get(userphone);
      this.getshowimg();
    }
  },
  methods: {
     handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.url=this.$store.state.userImg
            done();
          })
          .catch(_ => {});
      },
    getshowimg() {
      let uid = this.$store.state.id;
      this.url = this.url1+"?"+'uid='+uid
      this.$store.state.userImg = this.url 
      showimg({ uid: this.$store.state.id}).then((res) => {
      });
    },
    change1() {
      this.$router.push({
        path: "/banlance",
      });
    },
    change2() {
      this.$router.push({
        path: "/order",
      });
    },
    change3() {
      this.$router.push({
        path: "/discount",
      });
    },
    change4() {},
    change5() {
      this.$router.push({
        path: "/orderme",
      });
    },
    change6() {
      this.$router.push({
        path: "/clock",
        query: {
          list: this.list2,
        },
      });
    },
     change8() {
      this.$router.push({
        path: "/edit",
        query: {
          list: this.list2,
        },
      });
    },
    change7() {
      this.$router.push({
        path: "/edit",
        id: this.$store.state.id,
      });
    },
    checkout() {
      window.localStorage.setItem("activeClass", 0);
      this.$store.dispatch("logOut");
    },
      imgSaveToUrl(event){ 
                    /* 另外一种本地预览方法 */
        let URL = window.URL || window.webkitURL;
        this.imageUrl = URL.createObjectURL(event.raw);  
        this.url=  URL.createObjectURL(event.raw)
        
      },
      handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
     upload() {
      // 其中 upload 对应的是上传组件中的 ref 的值, submit() 是固定的
      let id = this.$store.state.id;
      this.$refs.upload.submit({ uid: id });
      this.$store.state.userImg=this.imageUrl 
      this.dialogVisible=false
    
    },
     upload1() {
      // 其中 upload 对应的是上传组件中的 ref 的值, submit() 是固定的
    this.url=this.$store.state.userImg
      this.dialogVisible=false
    
    },
       beforeAvatarUpload(file) {
     
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    get(userphone) {
      // 登录 vuex存用户userphone
      userInfo({ userphone }).then((res) => {
        // console.log(res.data, "userinfo");
        this.list2 = res.data.data;
      });
    },
  },
  data() {
    return {
       aaa: {
        user: ''
      },
      ishow: true,
      url: "http://192.168.10.32/junjian/user/showimg",
      imageUrl: "",
      url1: "http://192.168.10.32/junjian/user/showimg",
      dialogVisible:false,
      url2: "",
      list2: {},
    };
  },
};
</script>
<style scoped>
.mybox >>> .el-button > span {
  font-size: 30px;
}
.mybox .mybox1 .fdkjas{
  width: 18vw;
  height: 2vh;
  font-size: 2.6vw;
}
</style>
<style scoped lang="scss">
.mybox {
  color: #fff;
  font-size: 30px;
  width: 100vw;
  height: 100vh;
  > .myBg1 {
    background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
  }
  > .mybox1 {
    padding-top: 8vh;
    padding-left: 5vw;
    box-sizing: border-box;
    height: 35vh;
    overflow: hidden;
    > .myp1 {
      margin-top: 1vh;
      margin-bottom: 1vh;
      font-size: 40px;
      > .icon-nvsheng {
        background: rgb(255, 255, 255);
        padding: 1vw;
        border-radius: 50%;
        color: red;
        vertical-align: middle;
        font-size: 28px;
      }
      > .icon-nansheng {
        background: rgb(255, 255, 255);
        border-radius: 50%;
        font-weight: bold;
        padding: 1vw;
        vertical-align: middle;
        font-size: 28px;
        color: rgb(0, 217, 255);
      }
    }
    > p {
      height: 4vh;
    }
    > .mys1 {
      padding-right: 15vw;
      display: flex;
      justify-content: space-between;
      > p {
        > span {
          font-size: 4vw;
          font-weight: bold;
        }
      }
    }
    > .myimg {
      margin-bottom: 1vh;
      border-radius: 50%;
      height: 10vh;
      width: 10vh;
    }
    @keyframes light {
      from {
        box-shadow: 0px 0px 4vw 0.2vw rgb(255, 0, 0);
      }
      to {
        box-shadow: 0px 0px 4vw 0.2vw rgb(255, 254, 254);
      }
    }
    > .light {
      border-radius: 50%;
      animation: light 2s ease-in-out infinite alternate;
    }
    > .myimg1 {
      width: 3vw;
      height: 3vw;
    }
    > b {
      margin-right: 5vw;
      margin-top: 4vh;
      float: right;
      font-size: 2vw;
      background: rgb(132, 132, 255);
      width: 10vw;
      text-align: center;
      color: #fff;
      font-weight: normal;
      padding: 1vh 3vw;
      border-radius: 3vw;
    }
  }
  > .mybox2 {
    margin-top: 1vh;
    box-sizing: border-box;
    justify-content: space-around;
    height: 32vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    > .myli1 {
      background: rgb(255, 242, 255);
    }
    > .myli2 {
      background: rgb(235, 247, 255);
    }
    > .myli3 {
      background: rgb(228, 253, 255);
    }
    > .myli4 {
      background: rgb(237, 255, 245);
    }
    > .myli5 {
      background: rgb(255, 255, 229);
    }
    > .myli6 {
      background: rgb(255, 243, 243);
    }
    > li {
      border-radius: 1vw;
      text-align: center;
      width: 25vw;
      margin-bottom: 1vh;
      height: 25vw;
      color: black;
      background: rgb(243, 243, 243);
      margin: 1vw;
      > .i1 {
        color: purple;
      }
      > .i2 {
        color: rgb(104, 146, 41);
      }
      > .i3 {
        color: blue;
      }
      > .i4 {
        color: blue;
      }
      > .i5 {
        color: orange;
      }
      > .i6 {
        color: rgb(146, 240, 4);
      }
      > i {
        font-size: 9vw;
        margin-top: 3vh;
        padding: 0 0 1vh 0;
        display: block;
      }
    }
  }
  > .mybox3 {
    height: 20vh;
    text-align: center;
    margin-top: 2vh;
    > .checkout {
      text-align: center;
      width: 50vw;
      height: 4.5vh;
      background: rgb(204, 204, 204);
      color: #fff;
      border-radius: 20px;
    }
    > .centerlocal {
      height: 3vh;
      line-height: 3vh;
      display: flex;
      justify-content: space-around;
    }
    > .myColor {
      width: 23vw;
      opacity: 0.4;
      height: 13vh;
      border-radius: 50%;
      background: rgb(212, 222, 255);
      position: absolute;
      z-index: 1;
      left: -9vw;
    }
    > b {
      height: 6vh;
      line-height: 6vh;
    }
    > p:nth-of-type(1) {
      margin-top: 5vh;
    }
    > p {
      margin-top: 1vh;
      height: 3vh;
      line-height: 3vh;
      color: #999;
      > span {
        color: red;
      }
    }
  }
}
 .mybox >>>.el-dialog{
  width: 50vw;
  height: 50vw;
  font-size:5vw ;
}
.avatar{
  width: 30vw;
  height: 30vw;
  font-size:5vw ; 
 margin-left: 80%;
}
.dialog-footer{
  margin-right: 35%;
}
</style>